<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>PushServer</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/layui/css/layui.admin.css}" rel="stylesheet"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        用户连接数
                        <span class="layui-badge layui-bg-blue layuiadmin-badge">用户</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font"  th:text="${dashboard.userCount}">0</p>
                        <p>
                            当前在线用户数
                            <span class="layuiadmin-span-color"> <i class="layui-icon"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        群组数
                        <span class="layui-badge layui-bg-cyan layuiadmin-badge">群组</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">
                        <p class="layuiadmin-big-font" th:text="${dashboard.groupCount}" >0</p>
                        <p>
                            当前群组数
                            <span class="layuiadmin-span-color"> <i class="layui-icon"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        系统运行时长
                        <span class="layui-badge layui-bg-green layuiadmin-badge">时长</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">

                        <p class="layuiadmin-big-font" th:text="${dashboard.systemRunTime}" >0天 0时 0分</p>
                        <p>
                            自上次启动时长
                            <span class="layuiadmin-span-color"> <i class="layui-icon"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">
                        推送消息数
                        <span class="layui-badge layui-bg-orange layuiadmin-badge">内存</span>
                    </div>
                    <div class="layui-card-body layuiadmin-card-list">

                        <p class="layuiadmin-big-font" th:text="${dashboard.messageCount}">0</p>
                        <p>
                            消息数
                            <span class="layuiadmin-span-color">15% <i class="layui-icon"></i></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        在线用户数量
                        <div class="layui-btn-group layuiadmin-btn-group">
                            <!--<button class="layui-btn layui-btn-primary layui-btn-xs">去年</button>-->
                            <!--<button class="layui-btn layui-btn-primary layui-btn-xs">今年</button>-->
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-sm8">
                                <div id="echart" style="width: 100%;height:300px;"></div>
                            </div>
                            <div class="layui-col-sm4">
                                <div class="layuiadmin-card-list">
                                    <p class="layuiadmin-normal-font">CPU使用率</p>
                                    <span></span>
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                        <div class="layui-progress-bar" th:lay-percent="${dashboard.cpu}" th:style="'width:'+ ${dashboard.cpu}+';'"><span class="layui-progress-text" th:text="${dashboard.cpu}">0%</span></div>
                                    </div>
                                </div>
                                <div class="layuiadmin-card-list">
                                    <p class="layuiadmin-normal-font">内存使用率</p>
                                    <span></span>
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                        <div class="layui-progress-bar"  th:lay-percent="${dashboard.memery}" th:style="'width:'+ ${dashboard.memery}+';'"><span class="layui-progress-text" th:text="${dashboard.memery}" >0%</span></div>
                                    </div>
                                </div>
                                <div class="layuiadmin-card-list">
                                    <p class="layuiadmin-normal-font">线程使用率</p>
                                    <span></span>
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                        <div class="layui-progress-bar"  th:lay-percent="${dashboard.thread}" th:style="'width:'+ ${dashboard.thread}+';'"><span class="layui-progress-text" th:text="${dashboard.thread}" >0%</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/jquery/jquery-3.4.1.min.js}"></script>
<script th:src="@{/echarts/echarts.min.js}"></script>
<script>
    var myChart = echarts.init(document.getElementById('echart'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    }
    myChart.setOption(option);

</script>
</body>
</html>